<template>
  <div class="my">
    <div class="bg-wall">
      <div class="top">
        <img
          :src="baseUrl + userInfo.photo"
          alt=""
          class="img"
          @click="toPersonage"
        />
        <span class="name">{{ userInfo.name }}</span>
        <span class="read">今日阅读<span class="read2">2分钟</span></span>
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <div class="c1">123</div>
          <div class="c1-1">动态</div>
        </div>
        <div class="bottom-center">
          <div class="c2">1</div>
          <div class="c2-1">关注</div>
        </div>
        <div class="bottom-right">
          <div class="c3">500</div>
          <div class="c3-1">粉丝</div>
        </div>
      </div>
    </div>
    <!-- 中间收藏 历史 作品 -->
    <div class="hobby">
      <div class="collect">
        <van-icon name="star-o" class="t1" />
        <div class="t2">收藏</div>
      </div>
      <div class="history">
        <van-icon name="clock-o" class="y1" />
        <div class="y2">历史</div>
      </div>
      <div class="production">
        <van-icon name="orders-o" class="n1" />
        <div class="n2">作品</div>
      </div>
    </div>
    <!-- 单元格 -->
    <div class="myCell">
      <my-cell title="消息通知"></my-cell>
      <my-cell title="用户反馈"></my-cell>
      <my-cell title="小智同学" @click.native="$router.push('/xz')"></my-cell>
    </div>
    <!-- 底部退出按钮 -->
    <van-button
      block
      type="info"
      native-type="submit"
      class="button"
      @click="exit"
      >退出</van-button
    >
  </div>
</template>

<script>
import myCell from './myCell.vue'
// import myxiaozhi from './myxiaozhi.vue'
import { mapState } from 'vuex'
import { removeLocal } from '@/utils/local.js'
export default {
  components: { myCell },
  name: 'my',
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL
    }
  },
  methods: {
    // 点击头像跳转到个人信息
    toPersonage () {
      this.$router.push('/info')
    },
    // 退出
    exit () {
      // 提示用户
      this.$dialog
        .confirm({
          title: '退出',
          message: '您确定要退出吗?'
        })
        .then(() => {
          // 删除token
          removeLocal('token')
          // 修改登录状态
          this.$store.commit('setIsLogin', false)
          // 跳转到登录页面
          this.$router.push('/login')
        })
        .catch(() => {})
    }
  },
  // 计算属性
  computed: {
    ...mapState(['userInfo'])
  },
  // 调用接口，我在vuex中的actions(异步操作)中调用接口和保存数据，然后在created勾子中一进来就触发  this.$store.dispatch('refreshUserInfo')触发vuex中的actions中的方法
  created () {
    this.$store.dispatch('refreshUserInfo')
  }
}
</script>

<style lang="less" scoped>
.my {
  .bg-wall {
    background-color: #d0584d;
    height: 200px;
    .top {
      position: relative;
      .img {
        height: 50px;
        width: 50px;
        margin-top: 30px;
        margin-left: 20px;
        border-radius: 50%;
      }
      .name {
        font-size: 20px;
        color: #ffffff;
        margin-left: 10px;
        position: absolute;
        top: 40px;
        left: 80px;
      }
      .read {
        background-color: #1f4e7c;

        border-radius: 60px 0 0 60px;
        width: 60px;
        height: 50px;
        font-size: 12px !important;
        display: inline-block;
        color: #ffffff;
        position: absolute;
        top: 40px;
        right: 0px;
        padding-top: 10px;
        padding-left: 10px;
        .read2 {
          padding-left: 5px;
          margin-top: 5px;
        }
      }
    }
    .bottom {
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      padding: 5px 30px;
      .bottom-left {
        .c1 {
          text-align: center;
        }
      }
      .bottom-center {
        .c2 {
          text-align: center;
        }
      }
      .bottom-right {
        .c3 {
          text-align: center;
        }
      }
    }
  }
  .hobby {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    .collect {
      .t1 {
        margin-left: 5px;
      }
      .t2 {
        font-size: 16px;
        padding-top: 5px;
      }
    }
    .history {
      .y1 {
        margin-left: 5px;
      }
      .y2 {
        font-size: 16px;
        padding-top: 5px;
      }
    }
    .production {
      .n1 {
        margin-left: 5px;
      }
      .n2 {
        font-size: 16px;
        padding-top: 5px;
      }
    }
  }
  .button {
    margin-top: 20px;
    width: 320px;
    margin-left: 25px;
    background-color: #d0584d;
    border: 0px solid #d0584d;
  }
}
</style>
